iT邦幫忙

2025 iThome 鐵人賽

DAY 1
1
自我挑戰組

打造一個糖尿病自我監測小工具:從0開始學前端系列 第 1

Day01 打造一個糖尿病自我監測小工具:從0開始學前端

  • 分享至 

  • xImage
  •  

前言

我是個資訊科系的大學生,但是沒什麼電腦基礎,在大學的課程裡都是無腦跟著老師上課,要coding時就請GPT幫忙,但我覺得以後這樣不行,所以想藉由這次鐵人賽,鍛鍊自己的網頁Web能力。

這次30天我打算用基礎的HTML+CSS+JavaScripts寫一個有關糖尿病的網頁,目前的方向是希望能寫出一個病人可以使用的自我監測網頁做為練習,家人也能透過此網頁確認患者的狀況,希望最後可以寫出一個基本功能都有的網頁。之後有機會更進階的話,希望能用到 react + typescript + vite + tailwind css 聽教授說這是一種滿新的技術,而且也好用。

目前的計畫是用GPT新推出的「study and learn」模式,從0開始學習,這個模式跟以往不一樣的是會針對你的提問解釋後,最下面會問問題,如果是計畫的話,會跟你確認想要的計畫是怎麼樣的;如果是針對知識提問,會先清楚的解釋,最後出幾個小問題給你回答,讓我們對於知識更有掌握度。

那接下來就進入正題吧!

正題

首先是整體 Web ,如果以房子比喻的話,我們能這樣想像:

語言 功能
HTML 房子的骨架
CSS 房子的裝潢
JavaScripts 房子的功能

今天是第一天,我學習了基本的HTML,最基礎會用到的標籤有哪些,他們的作用是什麼。主要分成三個部分:結構元素、內容標籤、<head>內常見元素。
下面的部分同時也當作我以後可以看的筆記。

結構元素

<! DOCTYPE html>

  • 告訴瀏覽器,這是HTML文件
  • 最上面

<nav>
放置網站主要導覽連結 ( 會在隔天的進度出現)

<footer>
放置頁面的底部資訊,像是:版權宣告、聯絡資訊、網站小說明、社群連結

<html>
HTML頁面根元素

<head>

  • 放網站的設定
  • ex:<title>、編碼、CSS連結

<body>

  • 頁面可見內容區塊
  • ex:<hi><p><img><ul>

內容標籤

<h1> ~ <h6>

  • 為主標題
  • 一個頁面通常只有一個(<h1>)
  • <h2> ~ <h6>,代表不同層級小標題

<p>

  • 一段文字的說明 ( paragraph )
  • 自動換行、上下離白
  • 裡面不能放<h1>(標題類),但可以放<strong><a> ( 內聯 )

<strong>

  • 粗體→強調文字
  • <b>差別是:<b>只是單純粗體,但<strong> 會告訴瀏覽器這是重點

<a href = 網址>

  • 超連結
  • target = “_blank”:在新分頁打開

<img src = “ 網址” alt = “說明文字”>

  • 插入圖片
  • alt 為代替文字→圖片不顯示時

<ul>、<li>

  • 無序清單
  • 原點列出內容

<ol>、<li>

  • 有序清單
  • 數字列出內容

head內常見元素

<title>
頁籤上顯示的標題文字

<meta charset = “UTF-8”>

  • 指定網頁編碼方式
  • UTF-8:顯示中文

<link rel = “stylesheet” href = “style = style.css”>
外部引入CSS樣式檔 ( 放<head>裡 )

實作

實作的部分,嘗試一個個打出來,先當作小練習,所以都只有最基礎的架構。

程式碼

https://ithelp.ithome.com.tw/upload/images/20250824/20169698B70qZegPiB.png
https://ithelp.ithome.com.tw/upload/images/20250824/20169698eyvJQz4exA.png
https://ithelp.ithome.com.tw/upload/images/20250824/20169698nJg4M4gXDO.png
https://ithelp.ithome.com.tw/upload/images/20250824/20169698Z8Ce8aAdHM.png

預覽畫面

https://ithelp.ithome.com.tw/upload/images/20250824/20169698KyN3151bJe.png
https://ithelp.ithome.com.tw/upload/images/20250824/20169698avG2zd9SjY.png


下一篇
Day02 打造一個糖尿病自我監測小工具:從0開始學前端
系列文
打造一個糖尿病自我監測小工具:從0開始學前端4
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言